<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
    <script type="text/javascript" src="/javascript/lib/jQuery-3.3.1.js"></script>
    <script type="text/javascript" src="/javascript/lib/qiniu-2.2.2.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/qiniu.css">
</head>
<body>
    <div>
        <div style="float:left;margin-right: 10px">
            <div id="token-box"></div>
            <button id="getToken">获取token</button>
        </div>
        <div style="float:left">
            <div id="token-box-url" style="overflow-y: scroll">
                <img src="/images/null.jpg" id="byjs-test-image" alt="">
                <div id="image-url-temp"></div>
            </div>
            <button id="getImageUrl">获取图片URL</button>
            <button id="getImageUrl-clear">清除图片</button>
        </div>
        <div style="clear: both"></div>

        <hr>
        <div id="image-box">
            <input type="file" id="modal-inputFile" name="imageUpload">
            <button id="uploadImage">确认上传</button>
            <a href="https://portal.qiniu.com/bucket/byjs/resource" target="_blank">七牛官网</a>
            <hr>
            <div id="image-pre">
                <img src="" alt="" id="image">
                <a href="javascript:;" id="downloadImage">下载图片</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // https://developer.qiniu.com/sdk#official-sdk
        let uploadToken = ''
        $(function(){

            // 获取上传时的token
            $('#getToken').click(function(){
                $.post('/upload/getToken',{},function(res){
                    console.log('返回结果', res)
                    uploadToken = res.token;
                    $('#token-box').html(res.token);
                })
            })
            let imageObj = {
                name: '',
                data: ''
            }
            $("input[name=imageUpload]").change(function(e){
                let file = document.getElementById('modal-inputFile').files[0];
                if(/\.jpg$|\.png$/i.test(file.name)){
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(event){
                        let ib_pre = document.getElementById('image')
                        ib_pre.src = this.result;
                        imageObj.name = file.name;
                        imageObj.data = this.result
                        console.log('文件名字为:',file.name)
                    }
                } else {
                    alert('只能选择 .png/.jpg 文件格式 ')
                }
            })

            // 获取指定图片0.png图片的url
            $('#getImageUrl').click(function(){
                $.post('/upload/getImageUrl',{},function (res) {
                    console.log('0.png图片的URL', res)
                    $('#byjs-test-image').attr('src',res.data.url)
                })

                // $.post('/upload/qiniu',{},function(res){
                //     $('#byjs-test-image').attr('src',res.data.url)
                //     $('#image-url-temp').html(res.data.url)
                //     console.log('获取图片的的URL',res.data.url)
                // })
            })

            // 清除图片的url
            $('#getImageUrl-clear').click(function(){
                $('#byjs-test-image').attr('src','/images/null.jpg')
            })


            // 上传图片
            $('#uploadImage').click(function(){
                // $.post('',imageObj,function(res){
                //     console.log('图片上传结果',res)
                // })

                let config = {
                    useCdnDomain: true,
                    region: qiniu.region.z2
                }

                let putExtra = {
                    fname: imageObj.name,
                    params: {},
                    mimeType: ["image/png", "image/jpeg", "image/gif"] || null
                }

                let key = imageObj.name;

                // 本地上传
                let file = document.getElementById('modal-inputFile').files[0];

                let observable = qiniu.upload(file, key, uploadToken,putExtra, config)

                let observer = {
                    next(res){},
                    error(err){
                        console.error('上传错误', err.error)
                    },
                    complete(res){
                        // hash：已上传资源的校验码，供用户核对使用。
                        // key：目标资源的最终名字，可由七牛云存储自动命名

                        // 将七牛返回的数据保存到自己服务器
                        $.post('/upload/qiniu',res,function(result){
                            document.getElementById('downloadImage').href = result.data.downloadUrl
                            // $('#downloadImage').href = result.data.downloadUrl
                            console.log('图片返回结果',result)
                        })

                        console.log('完成了',res)
                    }
                }

                let subscription = observable.subscribe(observer)

                // 取消上传
                // subscription.unsubscribe();

            })
        })
    </script>
</body>
</html>